import React from 'react';
import {Tag} from 'antd';
import _ from 'lodash';
import Table, {
    setColumnKeys
} from '../_/table';

import redux from '../_/redux';
import EditorSelDepartment from './editorSelDepartment';
import EditorSelRole from './editorSelRole';

@redux('department', {actions: 'load'})
@redux('role', {prefix: 'roleAll', actions: 'load'})
export default class EditorDepartment extends React.Component {
    state = {modal: false, val: {}}

    componentWillReceiveProps(props) {
        const {defVal} = props;
        const {defVal: o} = this.props;
        if (defVal !== o || _.isEmpty(this.state.val)) {
            this.setState({val: defVal || {}, modalSelDepartment: false});
        }
    }

    onState = (flag, ...args) => {
        switch (flag) {
        case 'selDepartmentOk': {
            this.setState({modalSelDepartment: false});
            const {val} = this.state;
            const {items = {}} = val;
            val.items = _.reduce(args[0], (res, i) => {
                res[i] = '';
                return res;
            }, items);
            this.onValChange(val);
            break;
        }
        case 'selDepartmentCancel': {
            this.setState({modalSelDepartment: false});
            break;
        }
        case 'selRoleOk': {
            const {val, actId} = this.state;
            const {items = {}} = val;
            items[actId] = args[0];
            this.onValChange(val);
            this.setState({modalSelRole: false});
            break;
        }
        case 'selRoleCancel': {
            this.setState({modalSelRole: false});
            break;
        }
        }
    }

    onValChange = (val) => {
        this.setState({val});
        this.props.onState('authchange', val);
    }
    onRemove = (id) => {
        const {val} = this.state;
        const {items = {}} = val;
        val.items = _.omit(items, id);
        this.onValChange(val);
    }
    onRole = (id) => {
        this.setState({actId: id, modalSelRole: true});
    }
    onDef = (id) => {
        const {val} = this.state;
        val.def = id;
        this.onValChange(val);
    }
    onSelAdd = () => {
        this.setState({modalSelDepartment: true});
    }

    render() {
        const {data, roleAlldata} = this.props;
        const {val} = this.state;
        const {items = {}, def = -1} = val;
        const ids = _.keys(items);
        const dataSource = _.filter(data, i => i.Status && _.some(ids, k => k === i.Id));
        const columns = [{
            title: '科室名称',
            dataIndex: 'Name'
        }, {
            title: '角色名称',
            render: (val, row) => {
                const roleId = items[row.Id];
                const role = _.filter(roleAlldata, i => i.Id === roleId)[0] || {};
                return role.Name;
            }
        }, {
            title: '主属',
            render: (val, row) => (row.Id === def ? <Tag color="#87d068">是</Tag> : '')
        }, {
            width: 120,
            render: (val, row) =>
                (
                    <span>
                        <i
                            title="移除" className="iconfont icon-shanchu"
                            onClick={() => this.onRemove(row.Id)}
                        />
                        <span className="ant-divider"/>
                        <i
                            title="角色" className="iconfont icon-role"
                            onClick={() => this.onRole(row.Id)}
                        />
                        <span className="ant-divider"/>
                        <i
                            title="主属" className="iconfont icon-moren"
                            onClick={() => this.onDef(row.Id)}
                        />
                    </span>
                )
        }];
        setColumnKeys(columns);

        return (
            <div>
                <div>
                    <span className="title">所属科室</span>
                    <i
                        title="添加工作站"
                        className="iconfont icon-tianjia add"
                        onClick={this.onSelAdd}
                    />
                </div>
                <Table
                    size="small"
                    columns={columns}
                    dataSource={dataSource}
                    pagination={false}
                    bordered={false}
                />
                <EditorSelDepartment
                    width={this.props.width}
                    visible={this.state.modalSelDepartment}
                    onState={this.onState}
                    ids={ids}
                    data={data}
                />
                <EditorSelRole
                    width={this.props.width}
                    visible={this.state.modalSelRole}
                    onState={this.onState}
                    data={roleAlldata}
                />
            </div>
        );
    }
}
